<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>进度条</title>
	<link rel="stylesheet" href="../libs/layui/css/layui.css">
	<!-- <link rel="stylesheet" href="../css/progress.css"> -->
</head>

<body>
	<div class="layui-card">
		<div class="layui-card-header">
			进度条
		</div>
		<div class="layui-card-body">
			<div class="layui-progress" lay-showPercent="true">
				<div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div>
			</div>
			<br>
			<div class="layui-progress" lay-showPercent="yes">
				<div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
			</div>
			<br>
			<div class="layui-progress layui-progress-big" lay-showPercent="yes">
				<div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
			</div>
			<br>
			<div class="layui-progress layui-progress-big">
				<div class="layui-progress-bar" lay-percent="20%"></div>
			</div>
			<br>
			<div class="layui-progress layui-progress-big">
				<div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
			</div>
			<br>
			<div class="layui-progress layui-progress-big" lay-showPercent="true">
				<div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
			</div>
			<br>
			<blockquote class="layui-elem-quote">
				通过对设置属性 lay-percent="50%" 来设定进度条的数值<br>
				通过对父级元素设置属性 lay-showPercent="yes" 来开启进度比的文本显示，支持：普通数字、百分数、分数<br>
				注意：默认情况下不会显示百分比文本，如果你想开启，对属性lay-showPercent设置任意值即可，如：yes。但如果不想显示，千万别设置no或者false，直接剔除该属性即可。<br>
				当对元素设置了class为 layui-progress-big 时，即为大尺寸的进度条风格。默认风格的进度条的百分比如果开启，会在右上角显示，而大号进度条则会在内部显示。<br>
				方法 element.progress(filter, percent) 用于动态改变进度条百分比，例如： element.progress('demo', '30%');<br>
			</blockquote>
		</div>
	</div>
	<script src="../libs/layui/layui.js"></script>
	<script src="../js/progress.js"></script>
</body>

</html>
